<template>
  <div class="wrapper">
    <div class="header">
      <div class="title">我的</div>
    </div>
    <md-scroll-view class="scroll-view"
                    ref="scrollView"
                    :scrolling-x="false">
      <!--<div class="user-info">-->
      <!--<img class="avatar" :src="avatar" width="60" height="60">-->
      <!--<span class="line"></span>-->
      <!--<div class="info">-->
      <!--<p class="name">{{customerName}}</p>-->
      <!--<p class="desc">当前账号地市-未知</p>-->
      <!--</div>-->
      <!--</div>-->
      <div class="row">
        <div class="col" v-for="(item, index) in menu"
             :key="index" @click="openPage(item)">
          <img class="icon" :src="item.icon">
          <div class="name">{{item.name}}</div>
        </div>
      </div>
    </md-scroll-view>
    <dx-footer-bar :msg="3"></dx-footer-bar>
  </div>
</template>

<script type="text/ecmascript-6">
import { ScrollView, ScrollViewRefresh, Dialog } from 'mand-mobile';
import { DxFooterBar } from '@/components';
import { callNativeApi } from '@/utils/native';
import iconModifyPsw from './ue_modifyPsw.png';
import iconGesturePsw from './ue_gesture.png';
import iconScan from './ue_scan.png';
import iconLogout from './ue_logout.png';
import { logout } from '@/api/login';

export default {
  components: {
    DxFooterBar,
    [ScrollView.name]: ScrollView,
    [ScrollViewRefresh.name]: ScrollViewRefresh
  },
  computed: {},
  data() {
    return {
      menu: [
        { name: '修改密码', icon: iconModifyPsw, link: 'modifyPsw' },
        { name: '手势密码', icon: iconGesturePsw, link: 'gesture' },
        { name: '二维码', icon: iconScan, link: 'scanCode' },
        { name: '退出', icon: iconLogout, link: 'logout' }
      ]
    };
  },
  methods: {
    openPage(item) {
      if (item.link === 'gesture') {
        callNativeApi('dxGoGestureSeting');
      } else if (item.link === 'logout') {
        Dialog.confirm({
          title: '确认',
          content: '确认退出登录吗?',
          confirmText: '确定',
          onConfirm: () => this.logOut()
        });
      } else {
        this.$router.push({
          name: item.link
        });
      }
    },
    logOut() {
      logout().then(result => {
        if (result.message === 'success') {
          const loginOut = callNativeApi('dxGoLogin');
          if (!loginOut) {
            window.location.reload();
          }
        } else {
          Dialog.alert({ content: result.message });
        }
      }).catch(() => {
        Dialog.alert({ content: '失败！' });
      });
    }
  }
};
</script>

<style lang="stylus" scoped>
  linear = to bottom transparent 10%, rgba(255, 255, 255, .7) 50%, transparent 90%

  .wrapper
    display : flex
    flex-direction : column
    height : 100%

  .header
    height : 88px
    line-height : 88px
    text-align : center
    font-size : 36px
    background : theme-color
    color : #fff

  .scroll-view
    flex : 1

  .scroll-view-item
    padding : 30px 0
    text-align : center
    font-size : 28px
    border-bottom : .5px solid #efefef

  .row
    overflow : hidden
    background : #fff

  .col
    float : left
    padding : 20px
    width : 25%
    text-align : center
    border-bottom : .5px solid #eee
    border-right : .5px solid #eee

  .icon
    display : block
    margin : 0 auto 10px
    height : 76px
    width : 76px

  .name
    font-size : 28px
</style>
